<template>
  <div class="upload-component-box">
		<m-dialog
      top="8vh"
      width="85%"
      :visible.sync="dialogVisible"
			:footer-visible="false"
			@closeBtn="handleCloseRelease"
      title="历史记录"
    >
			<template #content>
				<SearchForm
					label-width="80px"
					:data="indexSearchData"
					@searchForm="searchForm"
					@resetForm="resetForm"
				/>
				<section>
					<m-editable
						height="400"
						v-loading="tableLoading"
						:data="dataList"
						:columns="addColumnsTable"
					>
						<template slot="default-action" slot-scope="scope">
							<el-button
								v-if="scope.row.errorTxt !== null"
								type="primary"
								plain
								@click="getClickErrorDownload(scope.row)"
								size="mini"
							>下载</el-button>
							<el-button
								v-if="scope.row.status === 'SAVESUCCESSFUL'"
								type="primary"
								plain
								@click="getClickDownload(scope.row)"
								size="mini"
							>下载</el-button>
						</template>
					</m-editable>
				</section>
				<div v-if="totalElements !== 0">
					<el-pagination
						style="border:1px solid #E6E6E6; border-top: none;padding: 5px 15px 5px 0;"
						class="pagination"
						align="right"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="curPage"
						:page-sizes="PAGE_NUMBER"
						:page-size="pageSize"
						:layout="PAGINATION_LAYOUT"
						:total="totalElements"
					/>
				</div>
			</template>
    </m-dialog>
	</div>
</template>
<script>
import SearchForm from '@pc/m-components/m-search'
import {indexSearchData, addColumnsTable} from './const'
import { getFileInfoList } from '@const/fileLibraryApi'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common.js'
import { $loadFileSimply } from '@const/loadFileOps'
import { fileDownload } from '@const/utils'
export default {
  components: { SearchForm, },
	data() {
		return {
			indexSearchData,
			addColumnsTable,
			dialogVisible: false,
			tableLoading: false,
			merchantId: this.$store.state.MID,
			companyId: this.$store.state.companyId,
			dataList: [],
			curPage: 1,
			PAGE_NUMBER,                 // 页码
      PAGINATION_LAYOUT,           // 分页功能
      pageSize: PAGE_NUMBER[0],    // 一页的数量
      totalElements: 0,            // 总页数
			queryCondition: {
				startCreatedAt: '',
				endCreatedAt: '',
				// fileCode: '',
				operationType: '',
				fileOldName: '' 
			},
		}
	},
	watch: {
		dialogVisible: {
			handler(val, oldVal) {
				if(val === true) {
					this.getHistoryInformation()
				}
			},
			deep: true,
		}
	},
	methods: {
		//点击历史记录下载
    getClickDownload(row) {
      const params = {
				url: `/guoke-deepexi-file-library/api/v1/business/file/download?fileCode=${row.fileCode}`,
				method: 'get',
				timeout: 200000
			}
			$loadFileSimply(params)
        .then(res => { fileDownload(res, row.fileOldName) })
    },
		//下载异常信息
		getClickErrorDownload(row) {
			let exceptionName = row.fileOldName.substring(0,row.fileOldName.indexOf('.'))
			const params = {
				url: `/guoke-deepexi-file-library/api/v1/business/file/downloadErrorMsgFile?fileCode=${row.fileCode}`,
				method: 'get'
			}
			$loadFileSimply(params)
				.then(res => {
						fileDownload(res, `${exceptionName}错误提示文件.txt`)
				})
		},
		//文件中心上传下载的历史记录
    getHistoryInformation() {
			this.tableLoading = true;
      let params = {
        // configCode: 'taiermao_xlsx',
				merchantId: this.merchantId,
				companyId: this.companyId,
				...this.queryCondition,
				pageNum: this.curPage,
        pageSize: this.pageSize
      }
      this.$axios.$post(getFileInfoList, params)
      .then(res => {
				if(res.code === '0') {
        	this.dataList = res.payload.content
					this.dataList.map(item => {
            if(item.operationType === 1) {
							item.operationType = '导入'
						}
						if(item.operationType === 2) {
							item.operationType = '导出'
						}
					})
				}
				this.totalElements = res.payload.totalElements
      })
			.finally(() => {
				this.tableLoading = false;
			})
    },
		handleCloseRelease() {
			this.dialogVisible = false
		},
		//点击查询
		searchForm(condition) {
			this.curPage = 1
			this.queryCondition = condition
			this.getHistoryInformation()
		},
		//重置
		resetForm(condition) {
			this.curPage = 1
			this.queryCondition = condition
			this.getHistoryInformation()
		},
		// 页码更改
		handleSizeChange(size) {
			this.curPage = 1
      this.pageSize = size
			this.getHistoryInformation()
		},
		// 切换不一样的页面,重置一切数据
		handleCurrentChange(curPage) {
			this.curPage = curPage
			this.getHistoryInformation()
		},
	}
}
</script>
<style lang="less" scoped>
  /deep/.el-dialog__body{
		padding: 0 20px 30px 20px;
	}
	.upload-component-box{
		.el-dialog{
			height: 600px;
			.el-editable{
				height: 400px;
			}                                        
		}
	}
</style>